<template>
  <div class="page">
    <div class="nav-head">
      <em class="page-logo">Ele</em>
      <span @click="jumpLogin()">登录/注册</span>
    </div>

    <div class="one">
      <span style="color: black; font-size: 14px">当前定位城市:</span
      ><span style="color: black; font-size: 14px"
        >定位不准时,请在城市列表中选择</span
      >
    </div>
    <div class="two">
      <p @click="jumpDw()" class="dwCity">{{ dw.name }}</p>
      <span>⮞</span>
    </div>
    <div>
      <table class="layui-table">
        <tbody>
          <tr>
            <td style="color: black; line-height: 0.44rem">热门城市</td>
          </tr>
          <tr class="three">
            <td
              :key="i"
              v-for="(v, i) in rm"
              style="width: 25%; box-sizing: border-box"
              @click="jumpRm(v)"
            >
              {{ v.name }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div>
      <p>全部城市</p>
      <ul :key="i" v-for="(v, i) in qb" class="four">
        <p class="five">{{ i }}</p>
        <li>
          <div :key="n" v-for="(m, n) in v" @click="jumpQb(m)">
            {{ m.name }}
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "page",

  data() {
    return {
      dw: "",
      rm: [],
      qb: {},
    };
  },
  created: function () {
    let _this = this;
    $.ajax({
      url: "https://elm.cangdu.org/v1/cities?type=guess",
      type: "GET",
      success: function (data) {
        console.log(data.name);
        _this.dw = data;
        console.log(data);
      },
    });
    $.ajax({
      url: "https://elm.cangdu.org/v1/cities?type=hot",
      type: "GET",
      success: function (data) {
        _this.rm = data;
      },
    });

    $.ajax({
      url: "https://elm.cangdu.org/v1/cities?type=group",
      type: "GET",
      success: function (data) {
        var newkey = Object.keys(data).sort();
        var newObj = {}; //创建一个新的对象，用于存放排好序的键值对
        for (var i = 0; i < newkey.length; i++) {
          //遍历newkey数组
          newObj[newkey[i]] = data[newkey[i]]; //向新创建的对象中按照排好的顺序依次增加键值对
        }
        _this.qb = newObj;
      },
    });
  },
  computed: {
    newItem() {
      return this.objKeySort(this.qb);
    },
  },
  methods: {
    objKeySort(obj) {
      //排序的函数
      var newkey = Object.keys(obj).sort();
      var newObj = {}; //创建一个新的对象，用于存放排好序的键值对
      for (var i = 0; i < newkey.length; i++) {
        //遍历newkey数组
        newObj[newkey[i]] = obj[newkey[i]]; //向新创建的对象中按照排好的顺序依次增加键值对
      }
      return newObj; //返回排好序的新对象
    },
    jumpLogin() {
      this.$store.commit("changeVal");
      this.$router.push({
        name: "login",
      });
    },
    jumpDw() {
      this.$store.commit("changeCityObj", this.dw);
      this.$router.push({
        name: "searchCity",
      });
    },
    jumpRm(v) {
      this.$store.commit("changeCityObj", v);
      this.$router.push({
        name: "searchCity",
      });
    },
    jumpQb(m) {
      this.$store.commit("changeCityObj", m);
      this.$router.push({
        name: "searchCity",
      });
    },
  },
};
</script>

<style  scoped>
.nav-head {
  width: 100%;
  height: 1.3rem;
  background-color: #0092e8;
  position: fixed;
  top: 0;
  z-index: 10;
  left: 0;
  margin-bottom: 1.3rem;
}
.one {
  display: flex;
  justify-content: space-between;
  border-bottom: 0.01rem solid #e6e6e6;
  height: 0.44rem;
  align-items: center;
  margin-top: 55px;
}

.two {
  display: flex;
  justify-content: space-between;
  height: 0.44rem;
  align-items: center;
  margin-top: 0.3rem;
}

.three {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

.three li {
  list-style: none;
  width: 1.01rem;
  border: 0.01rem solid #e6e6e6;
  text-align: center;
}

.four li {
  display: flex !important;
  width: 100% !important;
  flex-wrap: wrap;
}

.four li div {
  width: 25%;
  line-height: 1rem;
  vertical-align: middle;
  border: 0.01rem solid #e6e6e6;
  overflow: hidden;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: black;
  font-size: 16px;
  box-sizing: border-box;
  background-color: #fff;
  margin: 0px -1px -1px 0px;
}

.five {
  height: 0.44rem;
  border-top: 0.01rem solid #e6e6e6;
  border-bottom: 0.01rem solid #e6e6e6;
  vertical-align: middle;
  margin: 0.2rem 0;
  display: flex;
  padding: 10px 0;
  align-items: center;
  background-color: #fff;
}

.six {
  margin: 0.2rem 0;
}

.head a {
  color: white;
}
/* ----------------------------------------- */
.home-title {
  height: 0.5rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
  background-color: blue;
  color: #fff;
  align-items: center;
}
.home-title a {
  color: #fff;
}
.home-bottom {
  width: 100%;
  border-bottom: 0.01rem solid #e6e6e6;
  border-top: 0.01rem solid #e6e6e6;
  margin-top: 0.25rem;
  height: 1rem;
  text-align: center;
}
.home-bottom input {
  width: 90%;
  outline: none;
  border: none;
  height: 0.35rem;
  border-radius: 0.05rem;
  margin-top: 0.05rem;
  border: 1px solid #e6e6e6;
}
.home-bottom button {
  width: 90%;
  height: 0.35rem;
  border-radius: 0.05rem;
  margin-top: 0.05rem;
  background-color: blue;
}
.checkCity {
  font-size: 0.14rem;
}
.search-history {
  color: black;
  border-bottom: 0.005rem solid #e6e6e6;
  height: 0.22rem;
  width: 100%;
  font-size: 0.14rem;
  margin-top: 0.1rem;
}
.list {
  border-bottom: 1px solid #e6e6e6;
  text-align: center;
  color: black;
}
.dwCity {
  width: 100%;
  border-bottom: 1px solid #e6e6e6;
}
.nav-head {
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav-head span {
  color: #fff;
  font-size: 16px;
}
</style>